<template>
	<div class="ofd-container" id="ofd-container" ref="ofdContainer">
		<el-scrollbar class="ofdview-scroll" :style="{height: scrollHeight}">
			<div ref="ofdview" id="ofdview"></div>
		</el-scrollbar>
	</div>
</template>

<script>
	import { parseOfdDocument,renderOfd } from 'ofd-tools'
	export default {
		name:"ofd-preview",
		props: {
			url: {
				type: String,
				defat: ""
			}
		},
		data() {
			return {
				scrollHeight: 0,
			};
		},
		mounted(){
			this.$nextTick(() => {
				const ofdview = this.$refs.ofdContainer;
				const rect = ofdview.getBoundingClientRect();
				this.scrollHeight = rect.height;
			})
			this.parseOfdDocument();
		},
		methods:{
			parseOfdDocument(){
				const ofdview = this.$refs.ofdview;
				const rect = ofdview.getBoundingClientRect();
				let width  = rect.width;
				parseOfdDocument({
				  ofd: this.url,
				  success(res){
					const ofdObj = res[0];
					const divs = renderOfd(width,ofdObj)
					for(const div of divs){
						ofdview.appendChild(div);
					}
				  },
				  fail(e){
					  console.error(e);
                      this.$message.error("预览文件失败")
				  }
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.ofd-container{
	width: 100%;
	height: 100%;
}

.ofdview-scroll{
	width: 100%;
	height: 100%;
}

#ofdview{
	width: 100%;
	height: 100%;
}
</style>
